<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 2rem;
        }

        .table-container {
            width: 500px;
            height: 500px;
            overflow: auto;
            position: relative;
        }

        table {
            /* text-align: center; */
            /* width: 100%; */
            border-collapse: collapse;
            border-spacing: 0;
        }

        tr.red th {
            background: #ff4b4b;
            color: #fff;
        }

        tr td,
        tr th {
            padding: 8px;
            border: 1px solid #EEE;
        }

        /*表头实现固定*/
        thead tr th {
            position: sticky;
            top: 0;
        }

        tr td:first-child,
        tr th:first-child {
            position: sticky;
            left: 0;
            background-color: aquamarine;
        }

        tr th:first-child {
            z-index: 5;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <table>
            <colgroup>
                <col width="100px">
            </colgroup>
            <thead>
                <tr class="red">
                    <th>Name</th>
                    <th>Age</th>
                    <th>Job</th>
                    <th>Color</th>
                    <th>URL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Lorem.</td>
                    <td>Ullam.</td>
                    <td>Vel.</td>
                    <td>At.</td>
                    <td>Quis.</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        document.querySelector('table thead tr').innerHTML = `<tr>${new Array(20).fill('').map((_, index) => `<th>第${index}列</th>`).join('')}<tr>`
        document.querySelector('table tbody').innerHTML = new Array(20).fill('').map((_, rowIndex) => {
            return `<tr>${new Array(20).fill('').map((_, index) => `<td>第${rowIndex}行, 第${index}列</td>`).join('')}</tr>`
        }).join('')
        document.querySelector('table colgroup').innerHTML = new Array(20).fill('').map((_, rowIndex) => {
            return `<col width="200px">`
        }).join('')
        document.querySelector('table').style.width = (200 * 20) + `px`
    </script>
</body>

</html>